<template>
  <div class="app-container">
    <el-row>
      <el-col :span="17">
        <!-- 添加或修改属性配置对话框 -->
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="模板名" prop="name">
                <el-input v-model="form.name" placeholder="请输入模板名"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="moduleName" label="模块名">
                <el-input v-model="form.moduleName" placeholder="请输入模块名"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="备注:" prop="remark">
            <el-input v-model.trim="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" maxlength="30"
                      show-word-limit placeholder="请输入备注"/>
          </el-form-item>
          <el-form-item label="模板内容:" prop="content">
            <code-editor v-model="form.content" language="x-java" ref="codeEditor"/>
          </el-form-item>
        </el-form>
        <div style="float:right;">
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-col>
      <el-col :span="6" :push="1">
        <div>
          默认
        </div>
        <el-table :data="defaultAttrList" border size="mini" height="400" style="width: 100%;">
          <el-table-column prop="name" label="属性名" width="180"/>
          <el-table-column prop="remark" label="属性描述"/>
        </el-table>
        <div style="height:10px;"/>
        <div>
          自定义
        </div>
        <el-table :data="customAttrList" border size="mini" height="250" style="width: 100%;">
          <el-table-column prop="name" label="属性名" width="140"/>
          <el-table-column prop="remark" label="属性描述"/>
        </el-table>
        <span style="font-size:6px;color:#888;">注：自定义引用必须在之前加上customAttrs， 如：customAttrs.localDateFlag</span>
    </el-col>
    </el-row>

  </div>
</template>

<script>
import {addTemplate, getTemplate, updateTemplate} from "@/api/codegen/template";
import {listTypeAttr} from "@/api/codegen/attr";
import CodeEditor from '@/components/CodeEditor'

export default {
  name: "TemplateContentAdd",
  data() {
    return {
      // 弹出层标题
      title: "",
      // 表单参数
      form: {
        name: undefined,
        value: undefined,
        type: 1,
        sort: 0,
        remark: undefined
      },
      templateGroupId: undefined,
      // 默认属性
      defaultAttrList: [],
      // 自定义属性
      customAttrList: [],
      // 表单校验
      rules: {
        name: [
          {required: true, message: "模板名不能为空", trigger: "blur"}
        ],
        moduleName: [
          {required: true, message: "模块名不能为空", trigger: "blur"}
        ]
      }
    };
  },
  components: {
    CodeEditor
  },
  created() {
    this.templateGroupId = this.$route.query.templateGroupId;
    const dsSettringId = this.$route.params.templateId;
    if (dsSettringId) {
      getTemplate(dsSettringId).then(response => {
        this.form = response;
        this.$nextTick(() => {
          this.$refs.codeEditor._initialize();
        })
      });
    } else {
        this.$nextTick(() => {
          this.$refs.codeEditor._initialize();
        })
    }
    listTypeAttr().then(result => {
      this.defaultAttrList = result.default
      this.customAttrList = result.custom
      console.log(this.defaultAttrList)
    })
  },
  methods: {
    // 取消按钮
    cancel() {
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        name: undefined,
        moduleName: undefined,
        remark: undefined,
        content: undefined
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            let params = {...this.form}
            params.templateGroupId = this.templateGroupId
            updateTemplate(params).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.getList();
            });
          } else {
            let params = {...this.form}
            params.templateGroupId = this.templateGroupId
            addTemplate(params).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.getList();
            });
          }
        }
      });
    }
  }
};
</script>
